<template>
  <div>
     <Breadcrumb></Breadcrumb>
     <!-- 顶部区域 -->
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="预定编号">
            <el-input v-model="formInline.name" size="small" placeholder="预定编号"></el-input>
          </el-form-item>
          <el-form-item label="预定时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <el-button size="small" type="warning" @click="orderCollect">订单汇总</el-button>
        <!-- <el-button size="small" type="warning">导出</el-button> -->
        <!-- 导出当前的表格数据 tableData -->
        <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
          name="xxx公司订单列表.xls">
          <el-button size="small" type="warning" >导出</el-button>
        </download-excel>
        <!-- 导出选中的订单编号 -->
        <!-- <download-excel class="export-excel-wrapper" 
          name="xxx公司订单列表.xls">
          <el-button size="small" type="warning">导出</el-button>
        </download-excel> -->
      </div>
    </div>
    <!-- 表格 -->
     <div class="content">
      <el-table :data="tableData" border style="width: 100%"  header-cell-class-name="active-header"
        cell-class-name="table-center" @select="select">
    <el-table-column
      type="selection"
      width="55" :selectable="selectable">
    </el-table-column>
    <el-table-column prop="code" label="订单编号"  width="180">
       <template slot-scope="scope">
            <span @click="OrderDecs(scope.row)" style="color:blue;cursor: pointer;">{{ scope.row.code }}</span>
          </template>
    </el-table-column>
    <el-table-column
      prop="ordername"
      label="下单人"
      width="180">
    </el-table-column>
    <el-table-column
      prop="company"
      label="所属单位">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话">
    </el-table-column>
    <el-table-column
      prop="yudingTime"
      label="下单时间">
      <template slot-scope="scope">
           {{dayjs(scope.row.yudingTime).format('YYYY-MM-DD')}}
          </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="订单总价">
    </el-table-column>
    <el-table-column prop="huizongStatus" label="汇总状态">
      <template slot-scope="scope">
           {{scope.row.huizongStatus == 1 ? '未汇总':'已汇总'}}
          </template>
    </el-table-column>
  </el-table>
      

    </div>

    <!-- 分页 -->
    <pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></pagination>

    <!-- 抽屉组件 -->
    <OrderDesc ref="child"></OrderDesc>
     </div>
</template>

<script>
import Pagination from '@/components/pagination/Pagination.vue'
import dayjs from 'dayjs'
import OrderDesc  from './OrderDesc'
export default {
      data() {
        return {
           formInline:{},
            tableData: [],//订单列表数据
            total:10,
            pageSize:1,
            ids:[],
            DetailsForm:[],
             json_fields: {//映射字段值
        // "订单编号": 'code',
          //数字处理--
          "订单编号":{
          field:"code",
          callback:value=>{
            return '&nbsp;'+value;
          }
        },
        "下单人": 'ordername',
        "所属单位": 'company',
        "联系电话": 'phone',
        "预定时间":'yudingTime',
        "订单总价格":'price',
        "汇总状态":'huizongStatus'
      },
      title: 'xxx公司采购系统订单列表',//
        }
      },
      components:{
        Pagination,
        OrderDesc
      },
      methods: {
        dayjs,
     
        //点击编号跳到详情页

        OrderDecs(){
            this.$refs.child.drawer=true;
        },
        //汇总
        orderCollect(){
           //判断ids长度 至少>=2 
       if (this.ids.length >= 2) {
        //汇总订单
        console.log('this.ids---', this.ids);
        this.$api.changeStatus({ ids: this.ids.join(',') })
          .then(res => {
            console.log('汇总了----', res.data);
            if (res.data.status === 200) {
              this.$message({
                type: 'success',
                message: '汇总成功!'
              });
              this.orderList(1);
            }
          })

      } else {
        this.$alert('汇总订单至少需要2条订单信息', '汇总订单', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `取消汇总`
            });
          }
        });
      }
        },
        //获取分页
        CurrentChange(page){
            this.orderList(page)
        },
        //勾选内容
        select(selection,row){
          console.log(selection);
          let arr=[]
            selection.forEach(ele=>{
                arr.push(ele.id)
            })
            this.ids=arr;
            this.DetailsForm = selection;
        },
           //禁用按钮-------------------------------
    selectable(row, index) {
      // console.log('row, index',row, index);
      // return false;
      if (row.huizongStatus == 1) {
        return true;
      } else {
        return false;
      }
    },
        async orderList(page){
          let res =await this.$api.orderList({page})
          console.log("订单",res.data);
          if(res.data.status==200){
              this.tableData=res.data.data
              this.total = res.data.total
              this.pageSize=res.data.pageSize
          }else{
            this.tableData=[]
            this.total=1
            this.pageSize=1
          }
        }
      },
      created() {
        this.orderList(1)
      },
}
</script>

<style lang="less" scoped>
.header {
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;

  .el-form-item {
    margin-bottom: 16px;
  }

  .group {
    border: 1px solid #eee;
    padding: 8px;
  }
}

.content {
  background: #fff;

  /deep/ .active-header {
    color: #333;
    text-align: center;
  }

  /deep/ .table-center {
    text-align: center;
  }

  .pagination {
    padding: 10px;
  }
}
.export-excel-wrapper{
display: inline-block;
margin-left: 10px;
button{
  padding-left:30px ;
  padding-right:30px ;
}
}
</style>